import React, { useEffect, useState } from 'react';
import '../../styles/liu/work.scss'
import { SnippetsFilled, AccountBookFilled, ContactsFilled, SmileFilled, ExclamationCircleFilled, ManOutlined } from '@ant-design/icons';
import { Line } from '@ant-design/plots';
import { Badge, List, Progress, Card, Button, Table } from 'antd';
import { getLineList ,getList,getWorkCardList} from '../../api/liu/index'
interface Props {

}
function Home(props: Props) {
    const { Meta } = Card;
    var [data, setData] = useState([])
    var [tableList, setTableList] = useState([])
    //待处理卡片数据
    var [list, setlist] = useState([])
    //设置表格分页
    var [pagination,setPagination] = useState({ current:1,pageSize:5,total:1});
    useEffect(() => {
        //获取折线图数据
        getLineList().then((res: any) => {
            setData(res.data)
        })
        //获取表格数据
        getList().then((res:any)=>{           
            setTableList(res.data)
        })
        //获取待处理卡片数据
        getWorkCardList().then((res:any)=>{
            setlist(res.data)
        })
    }, [])
    //折线图
    const config: any = {
        data,
        xField: 'date',
        yField: 'value',
        seriesField: 'type',
        label: { layout: [{ type: 'hide-overlap', }] },
        legend: { itemName: { style: { fill: '#000' } } },
        color: ['#2984f8', '#3DD4A7', '#FA746B'],
    };

    //表格列
    const columns: any = [
        { title: '团队', dataIndex: 'name', },
        {title: '2021-01-04',dataIndex: "04",},
        {title: '2021-01-05',dataIndex: '05',},
        {title: '2021-01-06',dataIndex: '06',},
        {title: '2021-01-07',dataIndex: '07',},
        {title: '2021-01-08',dataIndex: '08',},
        {title: '2021-01-09',dataIndex: '09',},
        {title: '2021-01-10',dataIndex: '10',},
    ]

    return (
        <div className='work'>
            <div className="main">
                <p>早上好! Daisy</p>
                {/* 头部卡片 */}
                <div className="card">
                    <ul>
                        <li>
                            <div className='icon'><SnippetsFilled /></div>
                            <div className="data">
                                <span>居民总数量</span>
                                <p>11,000</p>
                            </div>
                        </li>
                        <li>
                            <div className='icon'><AccountBookFilled /></div>
                            <div className="data">
                                <span>签约居民量</span>
                                <p>11,000</p>
                            </div>
                        </li>
                        <li>
                            <div className='icon'><ContactsFilled /></div>
                            <div className="data">
                                <span>待处理服务量</span>
                                <p>11,000</p>
                            </div>
                        </li>
                        <li>
                            <div className='icon'><SmileFilled /></div>
                            <div className="data">
                                <span>已完成服务量</span>
                                <p>11,000</p>
                            </div>
                        </li>
                    </ul>
                </div>
                <div className="line">
                    {/* 折线图 */}
                    <div className="line-left">
                        <h4>数据概况</h4>
                        <Line {...config} />
                    </div>
                    {/* 待办提醒 */}
                    <div className="line-right">
                        <List
                            itemLayout="vertical"
                            dataSource={list}
                            header="待办提醒"
                            renderItem={(item:any) => (
                                <List.Item extra={<Badge dot></Badge>}>
                                    <List.Item.Meta
                                        title={<a href="https://ant.design">{item.num}</a>}
                                        description={item.title}
                                    />
                                </List.Item>
                            )}
                        />
                    </div>
                </div>
                <div className="tagbox">
                    {/* 进度条 */}
                    <div className="tag-left">
                        <h4>居民标签</h4>
                        <div className="progress">
                            <div className="top">
                                <span>高血压</span>
                                <b>200</b>
                            </div>
                            <Progress percent={20} size="small" showInfo={false} />
                        </div>
                        <div className="progress">
                            <div className="top">
                                <span>冠心病</span>
                                <b>120</b>
                            </div>
                            <Progress percent={70} size="small" showInfo={false} />
                        </div>
                        <div className="progress">
                            <div className="top">
                                <span>高血糖</span>
                                <b>40</b>
                            </div>
                            <Progress percent={60} size="small" showInfo={false} />
                        </div>
                        <div className="progress">
                            <div className="top">
                                <span>高血脂</span>
                                <b>30</b>
                            </div>
                            <Progress percent={40} size="small" showInfo={false} />
                        </div>
                        <div className="progress">
                            <div className="top">
                                <span>慢病护理</span>
                                <b>110</b>
                            </div>
                            <Progress percent={20} size="small" showInfo={false} />
                        </div>
                        <div className="progress">
                            <div className="top">
                                <span>多动症</span>
                                <b>110</b>
                            </div>
                            <Progress percent={16} size="small" showInfo={false} />
                        </div>

                    </div>
                    {/* 居民指标异常 */}
                    <div className="tag-right">
                        <div className="right-top">
                            <h4>居民指标异常</h4>
                            <span>全部 &nbsp;&gt;</span>
                        </div>

                        <div className="right-bottom">
                            <Card style={{ width: 230 }}>
                                <img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" alt="" />
                                <p>王然 <span>26岁</span><ManOutlined /></p>
                                <div><ExclamationCircleFilled /><i>血压过高</i></div>
                                <Button type="primary">查看详情</Button>
                            </Card>
                            <Card style={{ width: 230 }}>
                                <img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" alt="" />
                                <p>王然 <span>26岁</span><ManOutlined /></p>
                                <div><ExclamationCircleFilled /><i>血压过高</i></div>
                                <Button type="primary">查看详情</Button>
                            </Card>
                            <Card style={{ width: 230 }}>
                                <img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" alt="" />
                                <p>王然 <span>26岁</span><ManOutlined /></p>
                                <div><ExclamationCircleFilled /><i>血压过高</i></div>
                                <Button type="primary">查看详情</Button>
                            </Card>
                        </div>
                    </div>
                </div>
                <div className="tablebox">
                    <h4>本周签约概况</h4>
                    <Table columns={columns} dataSource={tableList} pagination={pagination}/>
                </div>
            </div>

        </div>
    );
}

export default Home;